import {designPage, reactive} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {ColorPicker} from "../../../../packages";
import * as React from "react";

export const demo1 = designPage(() => {

  const state = reactive({
    formData: {} as any
  });

  return () => (
    <DemoRow title="基本用法">
      <ColorPicker width={400} v-model={state.formData.name}/>
      <span>{state.formData.name}</span>
    </DemoRow>
  );
});

export const demo2 = designPage(() => {

  const state = reactive({
    formData: {} as any
  });

  return () => (
    <DemoRow title="透明度">
      <ColorPicker width={200} v-model={state.formData.name} enableAlpha/>
      <span>{state.formData.name}</span>
    </DemoRow>
  );
});
